<template>
  <div class="wrap">
    <div class="title">
      <img src="../../images/main/activity.png" alt> 活动管理
    </div>
    <div class="content">
      <ul>
        <li :class="active == 0 ? 'first active' : 'first' " @click="setActivity(0)">活动概况</li>
        <li :class="active == 1 ? ' active' : '' " @click="setActivity(1)">活动管理</li>
        <li :class="active == 2 ? ' active' : '' " @click="setActivity(2)">评论管理</li>
        <li :class="active == 3 ? ' active' : '' " @click="setActivity(3)">标签管理</li>
      </ul>
      <div class="info">



        <!-- 活动管理 -->
        <ac-man v-if="active == 1 && hackReset"></ac-man>
        <!-- 评论管理 -->
        <ac-com v-else-if="active == 2  && hackReset"></ac-com>
        <!-- 活动标签 -->
        <ac-tag v-else-if="active == 3  && hackReset"></ac-tag>
        <!-- 活动概况组件 -->
        <sc-man v-else></sc-man>
      </div>
    </div>
  </div>
</template>
<script>
import acMan from "./activity-man.vue";
import scMan from "./situation-activities";
import acTag from "./activity-tags.vue"
import acCom from "./commentList.vue"
export default {
  created(){
   let num = this.$route.query.ActivityNum || 0;
   this.setActivity(num);
  },
  components: {
    acMan,
    scMan,
    acTag,
    acCom
  },
  data() {
    return {
      active: 0,
      hackReset: false
    };
  },
  methods: {
    /**
     * 设置选项卡切换
     */
    setActivity: function (num) {
      let that = this
      this.hackReset = false
      that.active = num
      this.$nextTick(() => {
        this.hackReset = true
      })

    }
  }
};
</script>
<style scoped>
.body>.wrap {
  /* padding-top: 70px;
  padding-left: 129px; */
  width: 90%;
  margin: 40px auto 80px;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
  padding-left: 7px;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.content {
  margin-top: 40px;
}
.content ul {
  float: left;
  background: #f6f6f6;
  width: 148px;
  height: 278px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  position: absolute;
}
.content ul li.first {
  margin-top: 31px;
}
.content ul li.active {
  background: #085dab;
  color: #fff;
}
.content ul li {
  margin: 35px 0px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  cursor: pointer;
}
.info {
  /* width: 1504px; */
  /* float: left; */
  margin-left: 152px;
}
.head {
  display: flex;
  /* width: 1504px; */
  background: #f6f6f6;
}
.head > div {
  flex: 1;
  border-left: 1px solid #fff;
  height: 140px;
}
.head :first-child {
  border-left: 0px solid #fff;
}
.name {
  font-size: 18px;
  color: #000000;
  height: 24px;
  text-align: center;
  margin-top: 23px;
  margin-bottom: 27px;
  font-weight: bold;
}
.count {
  height: 50px;
  font-size: 36px;
  color: #085dab;
  text-align: center;
  line-height: 50px;
}
.tabs {
  margin-top: 38px;
  border: 1px solid #dddddd;
  width: 398px;
  height: 67px;
  display: flex;
  font-size: 20px;
}
.tabs > div {
  flex: 1;
  font-size: 20px;
  height: 67px;
  line-height: 67px;
  text-align: center;
  font-weight: bold;
}
.tabs:first-child {
  border-right: 1px solid #ddd;
}
.tabs .tabac {
  background: #e0eefe;
}
.thead {
  background: #e0eefe;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  /* width: 1488px; */
  height: 67px;
  line-height: 67px;
}
.thead > div {
  float: left;
  height: 67px;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
.tbody {
  width: 1488px;
  display: inline-block;
  overflow: hidden;
  height: 160px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  margin-top: -2px;
}
.tbody > div {
  height: 158px;
  line-height: 160px;
  float: left;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
  text-align: center;
  font-size: 18px;
  color: #4a4a4a;
}
.thead .lastchild {
  border: 0px;
  border-left: 1px solid #ddd;
  box-sizing: border-box;
}
.tbody .lastchild {
  border: 0px;
  border-left: 1px solid #ddd;
  box-sizing: border-box;
}
.servername {
  width: 200px;
}
.account {
  width: 249px;
}
.ysuccess {
  width: 280px;
}
.successed {
  width: 262px;
}
.cjpeople {
  width: 270px;
}
.qdpeople {
  width: 220px;
}
</style>
